<template>
    <v-layout>
        <template slot="header">
            取色板
        </template>
        <template slot="content">
            <div class="exmple-box">
                <colorPicker :defaultColor="defaultColor" @getColor="getColor"></colorPicker>
                <div class="exmple" :style="{background: currentColor}"></div>
            </div>
        </template>
    </v-layout>
</template>

<script>
import vLayout from "@/components/vLayout"
import colorPicker from "@/components/vColorPicker"
export default {
    components: {
        vLayout,
        colorPicker
    },
    data() {
        return {
            defaultColor: '#8ec5fe',
            currentColor: "#8ec5fe",
        }
    },
    methods: {
        getColor(color) {
            this.currentColor = color;
        }
    }
}
</script>

<style lang="less" scoped>
.exmple-box{
    display: flex;
    .exmple{
        height: 100px;
        width: 100px;
        margin-left: 50px;
        border-radius: 5px;
        border: 1px solid #e9e9e9;
    }
}
</style>
